<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<zdy >		
		<zdy-abbc></zdy-abbc> 
	</zdy>	
<zdy-2></zdy-2> 
</div>

<script>
	
(function () {
// 注册组件 嵌入的组件 必须加 <slot>
Vue.component('zdy', {
template: '<div >自定义dfgd组件!1<slot></slot></div>'
});

Vue.component('zdy-2', {
template: '<h1 >自定义dfgd组件!2</h1>'
});

Vue.component('zdy-abbc', {
template: '<h1 >自定义dfgd组件!3</h1>'
});
// 创建根实例
new Vue({
  el: '#app'
})
})()
</script>

 <div id="app1">
        <test></test>
        <hello></hello>
    </div>
 <script type="text/javascript">
        
        var vm = new Vue({
            el: "#app1",
            template: '<h1 @click="hi()">{{a}}</h1>',
            components: {
                "test": {
                    template: '<h1 @click="hi()">{{a}}</h1>'
                }
                
            },
             template:'<div @click="hh()">{{b}}</div>',
            components:{
                "hello":{
                    template: '<div @click="hh()">{{b}}</div>'

                }
            },
            data: function () {
                return{
                    a: "this is a test",
                    b:"hello"
                }
            },
            methods:{

                hi:function(){
                    alert("9")
                },
                hh:function(){
                    alert("89")
                }
            }
        });

    </script>
    
<div id="app2">
    <my-component></my-component>
    <component-two></component-two>
</div>

<script>
    var myComponent = Vue.extend({
        template:'<div>This is my first component!</div>'
    })
    var componentTwo = Vue.extend({
        template:'<div>This is my two component!</div>'
    })
    new Vue({
        el:"#app2",
        components:{
          'my-component' : myComponent,
          'component-two' :componentTwo
        }
    })
</script>


<div id="app3">
	<div>
	  <input v-model="parentMsg">
	  <br>{{parentMsg}}<br>
	  <child v-bind:message="parentMsg"></child>
	</div>
</div>
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app3',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

<div id="app4">
	<ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
  	</ol>
</div>

​
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

new Vue({
  el: '#app4',
  data: {
    sites: [
      { text: 'Run到底oob' },
      { text: 'Goog搜索le' },
      { text: 'Taobao' }
    ]
  }
})
</script>

<div id="app5">
	<ol>
    <example
        propA="989"
    	propB="haha2"
    	propC="haha3"
    	propD="1000"
    	propE="{'msg':'nihao'}"
    	propF="90"
    	></example>
  	</ol>
</div>

<script type="text/javascript">
  Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  },
   template: '<li>propA {{propA}}</li>'+
   '<li>propE {{propE.message }}</li>'

})
	
new Vue({
  el: '#app5'
})
</script>




<div id="app7">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>








<style>
    .container{
        width: 500px;height: 190px;margin: 100px auto;text-align: center;
        font-family: 微软雅黑;
    }
    .topBar{
        height: 40px;line-height: 40px;background-color: #4CD68E;
    }
    .header{
        height: 40px;background-color: #0c60ee;color: #fff;line-height: 40px;
    }
    .content{
        height: 50px;background-color: #2ac845;color: #333;line-height: 50px;
    }
    .footer{
        height: 60px;background-color: #30BD8A;color: yellow;line-height: 60px;
    }
</style>
<div id="myApp">
    <app>
        <app-header></app-header>
        <app-content></app-content>
        <app-footer></app-footer>
    </app>
</div>

<script type="text/javascript">
	(function () {
    Vue.component('app',{
        template:'<div class="container"><div class="topBar">这个地方在渲染后不会被占用</div><slot></slot></div>'
    });
    Vue.component('app-header',{
        template:'<div class="header" >this is header</div>'
    });
    Vue.component('app-content',{
        template:'<div class="content">this is content</div>'
    });
    Vue.component('app-footer',{
        template:'<div class="footer">this is footer</div>'
    });
    var myApp=new Vue({
        el:'#myApp'
    });
})()
</script>
</body>
</html>